<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3421852" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe654;</span>
                <div class="name">table-sort</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c8;</span>
                <div class="name">right_arrow</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe653;</span>
                <div class="name">icon_delete_hover</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c7;</span>
                <div class="name">tag_elect</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe652;</span>
                <div class="name">hmc-date</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe651;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe650;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c6;</span>
                <div class="name">close_android</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c4;</span>
                <div class="name">reset</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c5;</span>
                <div class="name">add_entrance</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c3;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c1;</span>
                <div class="name">tree_close</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c2;</span>
                <div class="name">tree_open</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6c0;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6be;</span>
                <div class="name">Icon-open</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6bf;</span>
                <div class="name">Icon-stow</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe64d;</span>
                <div class="name">icon_book</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe64f;</span>
                <div class="name">icon_hotel</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe64c;</span>
                <div class="name">btn_add account</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6bd;</span>
                <div class="name">费控-下拉</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe64e;</span>
                <div class="name">问号</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe60e;</span>
                <div class="name">帮助问号-面状</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe669;</span>
                <div class="name">数据异常</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe663;</span>
                <div class="name">收起</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe664;</span>
                <div class="name">展开</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6ba;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6bb;</span>
                <div class="name">Icon-tingzhi</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6bc;</span>
                <div class="name">Icon-shangxiaqiehuan</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b9;</span>
                <div class="name">Icon-xianxiazhifu1</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe64a;</span>
                <div class="name">icon_sort</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe64b;</span>
                <div class="name">icon_grouping</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe676;</span>
                <div class="name">bg-pdf</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe67d;</span>
                <div class="name">其他</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe67e;</span>
                <div class="name">OFD</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe646;</span>
                <div class="name">icon_diagnosis</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe647;</span>
                <div class="name">icon_approve data</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe648;</span>
                <div class="name">icon_invoices</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe649;</span>
                <div class="name">icon_file</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b8;</span>
                <div class="name">Icon-shouqi</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b7;</span>
                <div class="name">olading</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b6;</span>
                <div class="name">Icon-zhankai</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b4;</span>
                <div class="name">icon_view more</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b5;</span>
                <div class="name">icon_arrow1</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6af;</span>
                <div class="name">icon_checked_</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6ae;</span>
                <div class="name">icon_select_dpt</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b0;</span>
                <div class="name">icon_unchecked</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b1;</span>
                <div class="name">icon_unchecked_</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b2;</span>
                <div class="name">icon_checked</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6b3;</span>
                <div class="name">icon_subordinate</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6ad;</span>
                <div class="name">icon_over</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6ac;</span>
                <div class="name">icon_approval</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6ab;</span>
                <div class="name">icon_xiangqing</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6aa;</span>
                <div class="name">icon_jindu</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a8;</span>
                <div class="name">icon_success</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a9;</span>
                <div class="name">icon_fail</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a4;</span>
                <div class="name">icon_add2</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a5;</span>
                <div class="name">icon_add1</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a6;</span>
                <div class="name">icon_change</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a7;</span>
                <div class="name">icon_update</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a1;</span>
                <div class="name">icon_search</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a2;</span>
                <div class="name">icon-det1</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a3;</span>
                <div class="name">icon-det2</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe69c;</span>
                <div class="name">icon_caogao</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe69d;</span>
                <div class="name">icon_yiban</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe69e;</span>
                <div class="name">icon_chaosong</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe69f;</span>
                <div class="name">icon_faqi</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe6a0;</span>
                <div class="name">icon_daiban</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe627;</span>
                <div class="name">icon_cost</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe62a;</span>
                <div class="name">icon_airplane</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe62c;</span>
                <div class="name">icon_other</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe62f;</span>
                <div class="name">icon_automobile</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe631;</span>
                <div class="name">icon_parking charge</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe633;</span>
                <div class="name">icon_sign</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe634;</span>
                <div class="name">icon_oil cost</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe63e;</span>
                <div class="name">icon_gift</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe623;</span>
                <div class="name">icon_book</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe69b;</span>
                <div class="name">icon_select</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe632;</span>
                <div class="name">icon_hotel</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe61c;</span>
                <div class="name">icon_caution</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe697;</span>
                <div class="name">Icon-qiehuan</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe698;</span>
                <div class="name">Icon-tingzhi</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe699;</span>
                <div class="name">Icon-qiyong</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe69a;</span>
                <div class="name">Icon-tianjia</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe691;</span>
                <div class="name">icon_calendarrange</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe692;</span>
                <div class="name">icon_data</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe693;</span>
                <div class="name">icon_calendar</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe694;</span>
                <div class="name">icon_city</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe695;</span>
                <div class="name">icon_explain</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe696;</span>
                <div class="name">icon_borrowmoney</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe677;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe678;</span>
                <div class="name">添加节点</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe679;</span>
                <div class="name">图例</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe67a;</span>
                <div class="name">放大</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe67b;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe67c;</span>
                <div class="name">条件分支</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe63b;</span>
                <div class="name">审批节点</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe63c;</span>
                <div class="name">支付节点</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe63d;</span>
                <div class="name">抄送节点</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe67f;</span>
                <div class="name">Icon_cost</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe680;</span>
                <div class="name">icon_paragraph</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe681;</span>
                <div class="name">icon_file</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe682;</span>
                <div class="name">icon_multiple_dpt</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe683;</span>
                <div class="name">icon_detailed</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe684;</span>
                <div class="name">icon_multiple</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe685;</span>
                <div class="name">icon_line</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe686;</span>
                <div class="name">icon_number</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe687;</span>
                <div class="name">icon_image</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe688;</span>
                <div class="name">icon_personnel</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe689;</span>
                <div class="name">icon_single</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe68a;</span>
                <div class="name">icon_whether</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe68b;</span>
                <div class="name">icon_post</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe68c;</span>
                <div class="name">icon_radio</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe68d;</span>
                <div class="name">Icon-order</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe68e;</span>
                <div class="name">icon_single_dpt</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe68f;</span>
                <div class="name">Icon-supplier</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe690;</span>
                <div class="name">Icon-legal</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe63a;</span>
                <div class="name">icon_type</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe60a;</span>
                <div class="name">icon_lightning</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe60b;</span>
                <div class="name">icon_plan</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe60c;</span>
                <div class="name">icon_standby</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe60d;</span>
                <div class="name">icon_key point</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe60f;</span>
                <div class="name">icon_other</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe610;</span>
                <div class="name">icon_approve</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe611;</span>
                <div class="name">icon_procurement</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe612;</span>
                <div class="name">icon_urgency</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe625;</span>
                <div class="name">icon_printer</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe626;</span>
                <div class="name">icon_postage</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe645;</span>
                <div class="name">icon_cost</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe628;</span>
                <div class="name">icon_rivet</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe629;</span>
                <div class="name">icon_telephone charge</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe644;</span>
                <div class="name">icon_sign</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe62b;</span>
                <div class="name">icon_wine</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe643;</span>
                <div class="name">icon_parking charge</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe62d;</span>
                <div class="name">icon_passenger car</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe62e;</span>
                <div class="name">icon_train</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe640;</span>
                <div class="name">icon_automobile</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe630;</span>
                <div class="name">icon_steamship</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe641;</span>
                <div class="name">icon_oil cost</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe642;</span>
                <div class="name">icon_airplane</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe63f;</span>
                <div class="name">icon_gift</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe635;</span>
                <div class="name">icon_hire</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe636;</span>
                <div class="name">icon_entertainment</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe637;</span>
                <div class="name">icon_catering industry</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe638;</span>
                <div class="name">icon_people</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe639;</span>
                <div class="name">icon_file</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe61d;</span>
                <div class="name">icon_photograph</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe61e;</span>
                <div class="name">icon_edit</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe61f;</span>
                <div class="name">icon_delete</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe620;</span>
                <div class="name">icon_wechat</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe621;</span>
                <div class="name">icon_cost</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe622;</span>
                <div class="name">icon_record</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe624;</span>
                <div class="name">icon_close</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe616;</span>
                <div class="name">icon_proceeds</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe617;</span>
                <div class="name">icon_proportion</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe618;</span>
                <div class="name">icon_cost</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe619;</span>
                <div class="name">icon_invoice</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe61a;</span>
                <div class="name">icon_apply</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe61b;</span>
                <div class="name">icon_route</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe601;</span>
                <div class="name">icon_关闭</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe613;</span>
                <div class="name">icon_drag</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe614;</span>
                <div class="name">icon_statistics</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon olading-iconfont">&#xe615;</span>
                <div class="name">icon_cancel after verification</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'olading-iconfont';
  src: url('iconfont.woff2?t=1662023051829') format('woff2'),
       url('iconfont.woff?t=1662023051829') format('woff'),
       url('iconfont.ttf?t=1662023051829') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.olading-iconfont {
  font-family: "olading-iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="olading-iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"olading-iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon olading-iconfont oi-table-sort"></span>
            <div class="name">
              table-sort
            </div>
            <div class="code-name">.oi-table-sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-right_arrow"></span>
            <div class="name">
              right_arrow
            </div>
            <div class="code-name">.oi-right_arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_delete_hover"></span>
            <div class="name">
              icon_delete_hover
            </div>
            <div class="code-name">.oi-icon_delete_hover
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-tag_select"></span>
            <div class="name">
              tag_elect
            </div>
            <div class="code-name">.oi-tag_select
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-hmc-date"></span>
            <div class="name">
              hmc-date
            </div>
            <div class="code-name">.oi-hmc-date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.oi-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.oi-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-close_android"></span>
            <div class="name">
              close_android
            </div>
            <div class="code-name">.oi-close_android
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-reset"></span>
            <div class="name">
              reset
            </div>
            <div class="code-name">.oi-reset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-add_entrance"></span>
            <div class="name">
              add_entrance
            </div>
            <div class="code-name">.oi-add_entrance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-set"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.oi-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-tree_close"></span>
            <div class="name">
              tree_close
            </div>
            <div class="code-name">.oi-tree_close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-tree_open"></span>
            <div class="name">
              tree_open
            </div>
            <div class="code-name">.oi-tree_open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.oi-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-open"></span>
            <div class="name">
              Icon-open
            </div>
            <div class="code-name">.oi-Icon-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-stow"></span>
            <div class="name">
              Icon-stow
            </div>
            <div class="code-name">.oi-Icon-stow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_book"></span>
            <div class="name">
              icon_book
            </div>
            <div class="code-name">.oi-icon_book
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_hotel"></span>
            <div class="name">
              icon_hotel
            </div>
            <div class="code-name">.oi-icon_hotel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-btn_addaccount"></span>
            <div class="name">
              btn_add account
            </div>
            <div class="code-name">.oi-a-btn_addaccount
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-feikong-xiala"></span>
            <div class="name">
              费控-下拉
            </div>
            <div class="code-name">.oi-feikong-xiala
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-wenhao"></span>
            <div class="name">
              问号
            </div>
            <div class="code-name">.oi-wenhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-help"></span>
            <div class="name">
              帮助问号-面状
            </div>
            <div class="code-name">.oi-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-shujuyichang"></span>
            <div class="name">
              数据异常
            </div>
            <div class="code-name">.oi-shujuyichang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-shouqi"></span>
            <div class="name">
              收起
            </div>
            <div class="code-name">.oi-shouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-zhankai"></span>
            <div class="name">
              展开
            </div>
            <div class="code-name">.oi-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-tianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.oi-tianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-tingzhi1"></span>
            <div class="name">
              Icon-tingzhi
            </div>
            <div class="code-name">.oi-Icon-tingzhi1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-shangxiaqiehuan"></span>
            <div class="name">
              Icon-shangxiaqiehuan
            </div>
            <div class="code-name">.oi-Icon-shangxiaqiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-xianxiazhifu1"></span>
            <div class="name">
              Icon-xianxiazhifu1
            </div>
            <div class="code-name">.oi-Icon-xianxiazhifu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_sort"></span>
            <div class="name">
              icon_sort
            </div>
            <div class="code-name">.oi-icon_sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_grouping"></span>
            <div class="name">
              icon_grouping
            </div>
            <div class="code-name">.oi-icon_grouping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-bg-pdf"></span>
            <div class="name">
              bg-pdf
            </div>
            <div class="code-name">.oi-bg-pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-qita"></span>
            <div class="name">
              其他
            </div>
            <div class="code-name">.oi-qita
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-OFD"></span>
            <div class="name">
              OFD
            </div>
            <div class="code-name">.oi-OFD
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_diagnosis"></span>
            <div class="name">
              icon_diagnosis
            </div>
            <div class="code-name">.oi-icon_diagnosis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_approvedata"></span>
            <div class="name">
              icon_approve data
            </div>
            <div class="code-name">.oi-a-icon_approvedata
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_invoices"></span>
            <div class="name">
              icon_invoices
            </div>
            <div class="code-name">.oi-icon_invoices
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_file2"></span>
            <div class="name">
              icon_file
            </div>
            <div class="code-name">.oi-icon_file2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-shouqi"></span>
            <div class="name">
              Icon-shouqi
            </div>
            <div class="code-name">.oi-Icon-shouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-olading"></span>
            <div class="name">
              olading
            </div>
            <div class="code-name">.oi-olading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-zhankai"></span>
            <div class="name">
              Icon-zhankai
            </div>
            <div class="code-name">.oi-Icon-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_viewmore"></span>
            <div class="name">
              icon_view more
            </div>
            <div class="code-name">.oi-a-icon_viewmore
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_arrow1"></span>
            <div class="name">
              icon_arrow1
            </div>
            <div class="code-name">.oi-icon_arrow1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_checked_"></span>
            <div class="name">
              icon_checked_
            </div>
            <div class="code-name">.oi-icon_checked_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_select_dpt"></span>
            <div class="name">
              icon_select_dpt
            </div>
            <div class="code-name">.oi-icon_select_dpt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_unchecked"></span>
            <div class="name">
              icon_unchecked
            </div>
            <div class="code-name">.oi-icon_unchecked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_unchecked_"></span>
            <div class="name">
              icon_unchecked_
            </div>
            <div class="code-name">.oi-icon_unchecked_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_checked"></span>
            <div class="name">
              icon_checked
            </div>
            <div class="code-name">.oi-icon_checked
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_subordinate"></span>
            <div class="name">
              icon_subordinate
            </div>
            <div class="code-name">.oi-icon_subordinate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_over"></span>
            <div class="name">
              icon_over
            </div>
            <div class="code-name">.oi-icon_over
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_approval"></span>
            <div class="name">
              icon_approval
            </div>
            <div class="code-name">.oi-icon_approval
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_xiangqing"></span>
            <div class="name">
              icon_xiangqing
            </div>
            <div class="code-name">.oi-icon_xiangqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_jindu"></span>
            <div class="name">
              icon_jindu
            </div>
            <div class="code-name">.oi-icon_jindu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_success"></span>
            <div class="name">
              icon_success
            </div>
            <div class="code-name">.oi-icon_success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_fail"></span>
            <div class="name">
              icon_fail
            </div>
            <div class="code-name">.oi-icon_fail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_add2"></span>
            <div class="name">
              icon_add2
            </div>
            <div class="code-name">.oi-icon_add2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_add1"></span>
            <div class="name">
              icon_add1
            </div>
            <div class="code-name">.oi-icon_add1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_change"></span>
            <div class="name">
              icon_change
            </div>
            <div class="code-name">.oi-icon_change
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_update"></span>
            <div class="name">
              icon_update
            </div>
            <div class="code-name">.oi-icon_update
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_search"></span>
            <div class="name">
              icon_search
            </div>
            <div class="code-name">.oi-icon_search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon-det1"></span>
            <div class="name">
              icon-det1
            </div>
            <div class="code-name">.oi-icon-det1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon-det2"></span>
            <div class="name">
              icon-det2
            </div>
            <div class="code-name">.oi-icon-det2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_caogao"></span>
            <div class="name">
              icon_caogao
            </div>
            <div class="code-name">.oi-icon_caogao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_yiban"></span>
            <div class="name">
              icon_yiban
            </div>
            <div class="code-name">.oi-icon_yiban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_chaosong"></span>
            <div class="name">
              icon_chaosong
            </div>
            <div class="code-name">.oi-icon_chaosong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_faqi"></span>
            <div class="name">
              icon_faqi
            </div>
            <div class="code-name">.oi-icon_faqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_daiban"></span>
            <div class="name">
              icon_daiban
            </div>
            <div class="code-name">.oi-icon_daiban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_cost_"></span>
            <div class="name">
              icon_cost
            </div>
            <div class="code-name">.oi-icon_cost_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_airplane_"></span>
            <div class="name">
              icon_airplane
            </div>
            <div class="code-name">.oi-icon_airplane_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_other_"></span>
            <div class="name">
              icon_other
            </div>
            <div class="code-name">.oi-icon_other_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_automobile_"></span>
            <div class="name">
              icon_automobile
            </div>
            <div class="code-name">.oi-icon_automobile_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_parkingcharge_"></span>
            <div class="name">
              icon_parking charge
            </div>
            <div class="code-name">.oi-a-icon_parkingcharge_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_sign_"></span>
            <div class="name">
              icon_sign
            </div>
            <div class="code-name">.oi-icon_sign_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_oilcost_"></span>
            <div class="name">
              icon_oil cost
            </div>
            <div class="code-name">.oi-a-icon_oilcost_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_gift_"></span>
            <div class="name">
              icon_gift
            </div>
            <div class="code-name">.oi-icon_gift_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_book_"></span>
            <div class="name">
              icon_book
            </div>
            <div class="code-name">.oi-icon_book_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_select"></span>
            <div class="name">
              icon_select
            </div>
            <div class="code-name">.oi-icon_select
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_hotel_"></span>
            <div class="name">
              icon_hotel
            </div>
            <div class="code-name">.oi-icon_hotel_
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_caution"></span>
            <div class="name">
              icon_caution
            </div>
            <div class="code-name">.oi-icon_caution
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-qiehuan"></span>
            <div class="name">
              Icon-qiehuan
            </div>
            <div class="code-name">.oi-Icon-qiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-tingzhi"></span>
            <div class="name">
              Icon-tingzhi
            </div>
            <div class="code-name">.oi-Icon-tingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-qiyong"></span>
            <div class="name">
              Icon-qiyong
            </div>
            <div class="code-name">.oi-Icon-qiyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-tianjia"></span>
            <div class="name">
              Icon-tianjia
            </div>
            <div class="code-name">.oi-Icon-tianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_calendarrange"></span>
            <div class="name">
              icon_calendarrange
            </div>
            <div class="code-name">.oi-icon_calendarrange
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_data"></span>
            <div class="name">
              icon_data
            </div>
            <div class="code-name">.oi-icon_data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_calendar"></span>
            <div class="name">
              icon_calendar
            </div>
            <div class="code-name">.oi-icon_calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_city"></span>
            <div class="name">
              icon_city
            </div>
            <div class="code-name">.oi-icon_city
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_explain"></span>
            <div class="name">
              icon_explain
            </div>
            <div class="code-name">.oi-icon_explain
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_borrowmoney"></span>
            <div class="name">
              icon_borrowmoney
            </div>
            <div class="code-name">.oi-icon_borrowmoney
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-suoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.oi-suoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-tianjiajiedian"></span>
            <div class="name">
              添加节点
            </div>
            <div class="code-name">.oi-tianjiajiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-tuli"></span>
            <div class="name">
              图例
            </div>
            <div class="code-name">.oi-tuli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-fangda"></span>
            <div class="name">
              放大
            </div>
            <div class="code-name">.oi-fangda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.oi-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-tiaojianfenzhi"></span>
            <div class="name">
              条件分支
            </div>
            <div class="code-name">.oi-tiaojianfenzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-shenpijiedian"></span>
            <div class="name">
              审批节点
            </div>
            <div class="code-name">.oi-shenpijiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-zhifujiedian"></span>
            <div class="name">
              支付节点
            </div>
            <div class="code-name">.oi-zhifujiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-chaosongjiedian"></span>
            <div class="name">
              抄送节点
            </div>
            <div class="code-name">.oi-chaosongjiedian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon_cost"></span>
            <div class="name">
              Icon_cost
            </div>
            <div class="code-name">.oi-Icon_cost
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_paragraph"></span>
            <div class="name">
              icon_paragraph
            </div>
            <div class="code-name">.oi-icon_paragraph
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_file1"></span>
            <div class="name">
              icon_file
            </div>
            <div class="code-name">.oi-icon_file1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_multiple_dpt"></span>
            <div class="name">
              icon_multiple_dpt
            </div>
            <div class="code-name">.oi-icon_multiple_dpt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_detailed"></span>
            <div class="name">
              icon_detailed
            </div>
            <div class="code-name">.oi-icon_detailed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_multiple"></span>
            <div class="name">
              icon_multiple
            </div>
            <div class="code-name">.oi-icon_multiple
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_line"></span>
            <div class="name">
              icon_line
            </div>
            <div class="code-name">.oi-icon_line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_number"></span>
            <div class="name">
              icon_number
            </div>
            <div class="code-name">.oi-icon_number
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_image"></span>
            <div class="name">
              icon_image
            </div>
            <div class="code-name">.oi-icon_image
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_personnel"></span>
            <div class="name">
              icon_personnel
            </div>
            <div class="code-name">.oi-icon_personnel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_single"></span>
            <div class="name">
              icon_single
            </div>
            <div class="code-name">.oi-icon_single
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_whether"></span>
            <div class="name">
              icon_whether
            </div>
            <div class="code-name">.oi-icon_whether
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_post"></span>
            <div class="name">
              icon_post
            </div>
            <div class="code-name">.oi-icon_post
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_radio"></span>
            <div class="name">
              icon_radio
            </div>
            <div class="code-name">.oi-icon_radio
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-order"></span>
            <div class="name">
              Icon-order
            </div>
            <div class="code-name">.oi-Icon-order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_single_dpt"></span>
            <div class="name">
              icon_single_dpt
            </div>
            <div class="code-name">.oi-icon_single_dpt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-supplier"></span>
            <div class="name">
              Icon-supplier
            </div>
            <div class="code-name">.oi-Icon-supplier
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-Icon-legal"></span>
            <div class="name">
              Icon-legal
            </div>
            <div class="code-name">.oi-Icon-legal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_type"></span>
            <div class="name">
              icon_type
            </div>
            <div class="code-name">.oi-icon_type
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_lightning"></span>
            <div class="name">
              icon_lightning
            </div>
            <div class="code-name">.oi-icon_lightning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_plan"></span>
            <div class="name">
              icon_plan
            </div>
            <div class="code-name">.oi-icon_plan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_standby"></span>
            <div class="name">
              icon_standby
            </div>
            <div class="code-name">.oi-icon_standby
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_keypoint"></span>
            <div class="name">
              icon_key point
            </div>
            <div class="code-name">.oi-a-icon_keypoint
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_other"></span>
            <div class="name">
              icon_other
            </div>
            <div class="code-name">.oi-icon_other
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_approve"></span>
            <div class="name">
              icon_approve
            </div>
            <div class="code-name">.oi-icon_approve
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_procurement"></span>
            <div class="name">
              icon_procurement
            </div>
            <div class="code-name">.oi-icon_procurement
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_urgency"></span>
            <div class="name">
              icon_urgency
            </div>
            <div class="code-name">.oi-icon_urgency
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_printer"></span>
            <div class="name">
              icon_printer
            </div>
            <div class="code-name">.oi-icon_printer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_postage"></span>
            <div class="name">
              icon_postage
            </div>
            <div class="code-name">.oi-icon_postage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_cost2"></span>
            <div class="name">
              icon_cost
            </div>
            <div class="code-name">.oi-icon_cost2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_rivet"></span>
            <div class="name">
              icon_rivet
            </div>
            <div class="code-name">.oi-icon_rivet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_telephonecharge"></span>
            <div class="name">
              icon_telephone charge
            </div>
            <div class="code-name">.oi-a-icon_telephonecharge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_sign"></span>
            <div class="name">
              icon_sign
            </div>
            <div class="code-name">.oi-icon_sign
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_wine"></span>
            <div class="name">
              icon_wine
            </div>
            <div class="code-name">.oi-icon_wine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_parkingcharge"></span>
            <div class="name">
              icon_parking charge
            </div>
            <div class="code-name">.oi-a-icon_parkingcharge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_passengercar"></span>
            <div class="name">
              icon_passenger car
            </div>
            <div class="code-name">.oi-a-icon_passengercar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_train"></span>
            <div class="name">
              icon_train
            </div>
            <div class="code-name">.oi-icon_train
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_automobile"></span>
            <div class="name">
              icon_automobile
            </div>
            <div class="code-name">.oi-icon_automobile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_steamship"></span>
            <div class="name">
              icon_steamship
            </div>
            <div class="code-name">.oi-icon_steamship
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_oilcost"></span>
            <div class="name">
              icon_oil cost
            </div>
            <div class="code-name">.oi-a-icon_oilcost
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_airplane"></span>
            <div class="name">
              icon_airplane
            </div>
            <div class="code-name">.oi-icon_airplane
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_gift"></span>
            <div class="name">
              icon_gift
            </div>
            <div class="code-name">.oi-icon_gift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_hire"></span>
            <div class="name">
              icon_hire
            </div>
            <div class="code-name">.oi-icon_hire
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_entertainment"></span>
            <div class="name">
              icon_entertainment
            </div>
            <div class="code-name">.oi-icon_entertainment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_cateringindustry"></span>
            <div class="name">
              icon_catering industry
            </div>
            <div class="code-name">.oi-a-icon_cateringindustry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_people"></span>
            <div class="name">
              icon_people
            </div>
            <div class="code-name">.oi-icon_people
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_file"></span>
            <div class="name">
              icon_file
            </div>
            <div class="code-name">.oi-icon_file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_photograph"></span>
            <div class="name">
              icon_photograph
            </div>
            <div class="code-name">.oi-icon_photograph
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_edit"></span>
            <div class="name">
              icon_edit
            </div>
            <div class="code-name">.oi-icon_edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_delete"></span>
            <div class="name">
              icon_delete
            </div>
            <div class="code-name">.oi-icon_delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_wechat"></span>
            <div class="name">
              icon_wechat
            </div>
            <div class="code-name">.oi-icon_wechat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_cost1"></span>
            <div class="name">
              icon_cost
            </div>
            <div class="code-name">.oi-icon_cost1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_record"></span>
            <div class="name">
              icon_record
            </div>
            <div class="code-name">.oi-icon_record
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_close"></span>
            <div class="name">
              icon_close
            </div>
            <div class="code-name">.oi-icon_close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_proceeds"></span>
            <div class="name">
              icon_proceeds
            </div>
            <div class="code-name">.oi-icon_proceeds
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_proportion"></span>
            <div class="name">
              icon_proportion
            </div>
            <div class="code-name">.oi-icon_proportion
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_cost"></span>
            <div class="name">
              icon_cost
            </div>
            <div class="code-name">.oi-icon_cost
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_invoice"></span>
            <div class="name">
              icon_invoice
            </div>
            <div class="code-name">.oi-icon_invoice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_apply"></span>
            <div class="name">
              icon_apply
            </div>
            <div class="code-name">.oi-icon_apply
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_route"></span>
            <div class="name">
              icon_route
            </div>
            <div class="code-name">.oi-icon_route
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_guanbi"></span>
            <div class="name">
              icon_关闭
            </div>
            <div class="code-name">.oi-icon_guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_drag"></span>
            <div class="name">
              icon_drag
            </div>
            <div class="code-name">.oi-icon_drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-icon_statistics"></span>
            <div class="name">
              icon_statistics
            </div>
            <div class="code-name">.oi-icon_statistics
            </div>
          </li>
          
          <li class="dib">
            <span class="icon olading-iconfont oi-a-icon_cancelafterverification"></span>
            <div class="name">
              icon_cancel after verification
            </div>
            <div class="code-name">.oi-a-icon_cancelafterverification
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="olading-iconfont oi-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            olading-iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-table-sort"></use>
                </svg>
                <div class="name">table-sort</div>
                <div class="code-name">#oi-table-sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-right_arrow"></use>
                </svg>
                <div class="name">right_arrow</div>
                <div class="code-name">#oi-right_arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_delete_hover"></use>
                </svg>
                <div class="name">icon_delete_hover</div>
                <div class="code-name">#oi-icon_delete_hover</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-tag_select"></use>
                </svg>
                <div class="name">tag_elect</div>
                <div class="code-name">#oi-tag_select</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-hmc-date"></use>
                </svg>
                <div class="name">hmc-date</div>
                <div class="code-name">#oi-hmc-date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#oi-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#oi-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-close_android"></use>
                </svg>
                <div class="name">close_android</div>
                <div class="code-name">#oi-close_android</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-reset"></use>
                </svg>
                <div class="name">reset</div>
                <div class="code-name">#oi-reset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-add_entrance"></use>
                </svg>
                <div class="name">add_entrance</div>
                <div class="code-name">#oi-add_entrance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-set"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#oi-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-tree_close"></use>
                </svg>
                <div class="name">tree_close</div>
                <div class="code-name">#oi-tree_close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-tree_open"></use>
                </svg>
                <div class="name">tree_open</div>
                <div class="code-name">#oi-tree_open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#oi-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-open"></use>
                </svg>
                <div class="name">Icon-open</div>
                <div class="code-name">#oi-Icon-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-stow"></use>
                </svg>
                <div class="name">Icon-stow</div>
                <div class="code-name">#oi-Icon-stow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_book"></use>
                </svg>
                <div class="name">icon_book</div>
                <div class="code-name">#oi-icon_book</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_hotel"></use>
                </svg>
                <div class="name">icon_hotel</div>
                <div class="code-name">#oi-icon_hotel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-btn_addaccount"></use>
                </svg>
                <div class="name">btn_add account</div>
                <div class="code-name">#oi-a-btn_addaccount</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-feikong-xiala"></use>
                </svg>
                <div class="name">费控-下拉</div>
                <div class="code-name">#oi-feikong-xiala</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-wenhao"></use>
                </svg>
                <div class="name">问号</div>
                <div class="code-name">#oi-wenhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-help"></use>
                </svg>
                <div class="name">帮助问号-面状</div>
                <div class="code-name">#oi-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-shujuyichang"></use>
                </svg>
                <div class="name">数据异常</div>
                <div class="code-name">#oi-shujuyichang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-shouqi"></use>
                </svg>
                <div class="name">收起</div>
                <div class="code-name">#oi-shouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-zhankai"></use>
                </svg>
                <div class="name">展开</div>
                <div class="code-name">#oi-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-tianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#oi-tianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-tingzhi1"></use>
                </svg>
                <div class="name">Icon-tingzhi</div>
                <div class="code-name">#oi-Icon-tingzhi1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-shangxiaqiehuan"></use>
                </svg>
                <div class="name">Icon-shangxiaqiehuan</div>
                <div class="code-name">#oi-Icon-shangxiaqiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-xianxiazhifu1"></use>
                </svg>
                <div class="name">Icon-xianxiazhifu1</div>
                <div class="code-name">#oi-Icon-xianxiazhifu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_sort"></use>
                </svg>
                <div class="name">icon_sort</div>
                <div class="code-name">#oi-icon_sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_grouping"></use>
                </svg>
                <div class="name">icon_grouping</div>
                <div class="code-name">#oi-icon_grouping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-bg-pdf"></use>
                </svg>
                <div class="name">bg-pdf</div>
                <div class="code-name">#oi-bg-pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-qita"></use>
                </svg>
                <div class="name">其他</div>
                <div class="code-name">#oi-qita</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-OFD"></use>
                </svg>
                <div class="name">OFD</div>
                <div class="code-name">#oi-OFD</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_diagnosis"></use>
                </svg>
                <div class="name">icon_diagnosis</div>
                <div class="code-name">#oi-icon_diagnosis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_approvedata"></use>
                </svg>
                <div class="name">icon_approve data</div>
                <div class="code-name">#oi-a-icon_approvedata</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_invoices"></use>
                </svg>
                <div class="name">icon_invoices</div>
                <div class="code-name">#oi-icon_invoices</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_file2"></use>
                </svg>
                <div class="name">icon_file</div>
                <div class="code-name">#oi-icon_file2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-shouqi"></use>
                </svg>
                <div class="name">Icon-shouqi</div>
                <div class="code-name">#oi-Icon-shouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-olading"></use>
                </svg>
                <div class="name">olading</div>
                <div class="code-name">#oi-olading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-zhankai"></use>
                </svg>
                <div class="name">Icon-zhankai</div>
                <div class="code-name">#oi-Icon-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_viewmore"></use>
                </svg>
                <div class="name">icon_view more</div>
                <div class="code-name">#oi-a-icon_viewmore</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_arrow1"></use>
                </svg>
                <div class="name">icon_arrow1</div>
                <div class="code-name">#oi-icon_arrow1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_checked_"></use>
                </svg>
                <div class="name">icon_checked_</div>
                <div class="code-name">#oi-icon_checked_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_select_dpt"></use>
                </svg>
                <div class="name">icon_select_dpt</div>
                <div class="code-name">#oi-icon_select_dpt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_unchecked"></use>
                </svg>
                <div class="name">icon_unchecked</div>
                <div class="code-name">#oi-icon_unchecked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_unchecked_"></use>
                </svg>
                <div class="name">icon_unchecked_</div>
                <div class="code-name">#oi-icon_unchecked_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_checked"></use>
                </svg>
                <div class="name">icon_checked</div>
                <div class="code-name">#oi-icon_checked</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_subordinate"></use>
                </svg>
                <div class="name">icon_subordinate</div>
                <div class="code-name">#oi-icon_subordinate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_over"></use>
                </svg>
                <div class="name">icon_over</div>
                <div class="code-name">#oi-icon_over</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_approval"></use>
                </svg>
                <div class="name">icon_approval</div>
                <div class="code-name">#oi-icon_approval</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_xiangqing"></use>
                </svg>
                <div class="name">icon_xiangqing</div>
                <div class="code-name">#oi-icon_xiangqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_jindu"></use>
                </svg>
                <div class="name">icon_jindu</div>
                <div class="code-name">#oi-icon_jindu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_success"></use>
                </svg>
                <div class="name">icon_success</div>
                <div class="code-name">#oi-icon_success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_fail"></use>
                </svg>
                <div class="name">icon_fail</div>
                <div class="code-name">#oi-icon_fail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_add2"></use>
                </svg>
                <div class="name">icon_add2</div>
                <div class="code-name">#oi-icon_add2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_add1"></use>
                </svg>
                <div class="name">icon_add1</div>
                <div class="code-name">#oi-icon_add1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_change"></use>
                </svg>
                <div class="name">icon_change</div>
                <div class="code-name">#oi-icon_change</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_update"></use>
                </svg>
                <div class="name">icon_update</div>
                <div class="code-name">#oi-icon_update</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_search"></use>
                </svg>
                <div class="name">icon_search</div>
                <div class="code-name">#oi-icon_search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon-det1"></use>
                </svg>
                <div class="name">icon-det1</div>
                <div class="code-name">#oi-icon-det1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon-det2"></use>
                </svg>
                <div class="name">icon-det2</div>
                <div class="code-name">#oi-icon-det2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_caogao"></use>
                </svg>
                <div class="name">icon_caogao</div>
                <div class="code-name">#oi-icon_caogao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_yiban"></use>
                </svg>
                <div class="name">icon_yiban</div>
                <div class="code-name">#oi-icon_yiban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_chaosong"></use>
                </svg>
                <div class="name">icon_chaosong</div>
                <div class="code-name">#oi-icon_chaosong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_faqi"></use>
                </svg>
                <div class="name">icon_faqi</div>
                <div class="code-name">#oi-icon_faqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_daiban"></use>
                </svg>
                <div class="name">icon_daiban</div>
                <div class="code-name">#oi-icon_daiban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_cost_"></use>
                </svg>
                <div class="name">icon_cost</div>
                <div class="code-name">#oi-icon_cost_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_airplane_"></use>
                </svg>
                <div class="name">icon_airplane</div>
                <div class="code-name">#oi-icon_airplane_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_other_"></use>
                </svg>
                <div class="name">icon_other</div>
                <div class="code-name">#oi-icon_other_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_automobile_"></use>
                </svg>
                <div class="name">icon_automobile</div>
                <div class="code-name">#oi-icon_automobile_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_parkingcharge_"></use>
                </svg>
                <div class="name">icon_parking charge</div>
                <div class="code-name">#oi-a-icon_parkingcharge_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_sign_"></use>
                </svg>
                <div class="name">icon_sign</div>
                <div class="code-name">#oi-icon_sign_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_oilcost_"></use>
                </svg>
                <div class="name">icon_oil cost</div>
                <div class="code-name">#oi-a-icon_oilcost_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_gift_"></use>
                </svg>
                <div class="name">icon_gift</div>
                <div class="code-name">#oi-icon_gift_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_book_"></use>
                </svg>
                <div class="name">icon_book</div>
                <div class="code-name">#oi-icon_book_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_select"></use>
                </svg>
                <div class="name">icon_select</div>
                <div class="code-name">#oi-icon_select</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_hotel_"></use>
                </svg>
                <div class="name">icon_hotel</div>
                <div class="code-name">#oi-icon_hotel_</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_caution"></use>
                </svg>
                <div class="name">icon_caution</div>
                <div class="code-name">#oi-icon_caution</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-qiehuan"></use>
                </svg>
                <div class="name">Icon-qiehuan</div>
                <div class="code-name">#oi-Icon-qiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-tingzhi"></use>
                </svg>
                <div class="name">Icon-tingzhi</div>
                <div class="code-name">#oi-Icon-tingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-qiyong"></use>
                </svg>
                <div class="name">Icon-qiyong</div>
                <div class="code-name">#oi-Icon-qiyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-tianjia"></use>
                </svg>
                <div class="name">Icon-tianjia</div>
                <div class="code-name">#oi-Icon-tianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_calendarrange"></use>
                </svg>
                <div class="name">icon_calendarrange</div>
                <div class="code-name">#oi-icon_calendarrange</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_data"></use>
                </svg>
                <div class="name">icon_data</div>
                <div class="code-name">#oi-icon_data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_calendar"></use>
                </svg>
                <div class="name">icon_calendar</div>
                <div class="code-name">#oi-icon_calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_city"></use>
                </svg>
                <div class="name">icon_city</div>
                <div class="code-name">#oi-icon_city</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_explain"></use>
                </svg>
                <div class="name">icon_explain</div>
                <div class="code-name">#oi-icon_explain</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_borrowmoney"></use>
                </svg>
                <div class="name">icon_borrowmoney</div>
                <div class="code-name">#oi-icon_borrowmoney</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-suoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#oi-suoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-tianjiajiedian"></use>
                </svg>
                <div class="name">添加节点</div>
                <div class="code-name">#oi-tianjiajiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-tuli"></use>
                </svg>
                <div class="name">图例</div>
                <div class="code-name">#oi-tuli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-fangda"></use>
                </svg>
                <div class="name">放大</div>
                <div class="code-name">#oi-fangda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#oi-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-tiaojianfenzhi"></use>
                </svg>
                <div class="name">条件分支</div>
                <div class="code-name">#oi-tiaojianfenzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-shenpijiedian"></use>
                </svg>
                <div class="name">审批节点</div>
                <div class="code-name">#oi-shenpijiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-zhifujiedian"></use>
                </svg>
                <div class="name">支付节点</div>
                <div class="code-name">#oi-zhifujiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-chaosongjiedian"></use>
                </svg>
                <div class="name">抄送节点</div>
                <div class="code-name">#oi-chaosongjiedian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon_cost"></use>
                </svg>
                <div class="name">Icon_cost</div>
                <div class="code-name">#oi-Icon_cost</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_paragraph"></use>
                </svg>
                <div class="name">icon_paragraph</div>
                <div class="code-name">#oi-icon_paragraph</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_file1"></use>
                </svg>
                <div class="name">icon_file</div>
                <div class="code-name">#oi-icon_file1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_multiple_dpt"></use>
                </svg>
                <div class="name">icon_multiple_dpt</div>
                <div class="code-name">#oi-icon_multiple_dpt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_detailed"></use>
                </svg>
                <div class="name">icon_detailed</div>
                <div class="code-name">#oi-icon_detailed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_multiple"></use>
                </svg>
                <div class="name">icon_multiple</div>
                <div class="code-name">#oi-icon_multiple</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_line"></use>
                </svg>
                <div class="name">icon_line</div>
                <div class="code-name">#oi-icon_line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_number"></use>
                </svg>
                <div class="name">icon_number</div>
                <div class="code-name">#oi-icon_number</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_image"></use>
                </svg>
                <div class="name">icon_image</div>
                <div class="code-name">#oi-icon_image</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_personnel"></use>
                </svg>
                <div class="name">icon_personnel</div>
                <div class="code-name">#oi-icon_personnel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_single"></use>
                </svg>
                <div class="name">icon_single</div>
                <div class="code-name">#oi-icon_single</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_whether"></use>
                </svg>
                <div class="name">icon_whether</div>
                <div class="code-name">#oi-icon_whether</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_post"></use>
                </svg>
                <div class="name">icon_post</div>
                <div class="code-name">#oi-icon_post</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_radio"></use>
                </svg>
                <div class="name">icon_radio</div>
                <div class="code-name">#oi-icon_radio</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-order"></use>
                </svg>
                <div class="name">Icon-order</div>
                <div class="code-name">#oi-Icon-order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_single_dpt"></use>
                </svg>
                <div class="name">icon_single_dpt</div>
                <div class="code-name">#oi-icon_single_dpt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-supplier"></use>
                </svg>
                <div class="name">Icon-supplier</div>
                <div class="code-name">#oi-Icon-supplier</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-Icon-legal"></use>
                </svg>
                <div class="name">Icon-legal</div>
                <div class="code-name">#oi-Icon-legal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_type"></use>
                </svg>
                <div class="name">icon_type</div>
                <div class="code-name">#oi-icon_type</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_lightning"></use>
                </svg>
                <div class="name">icon_lightning</div>
                <div class="code-name">#oi-icon_lightning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_plan"></use>
                </svg>
                <div class="name">icon_plan</div>
                <div class="code-name">#oi-icon_plan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_standby"></use>
                </svg>
                <div class="name">icon_standby</div>
                <div class="code-name">#oi-icon_standby</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_keypoint"></use>
                </svg>
                <div class="name">icon_key point</div>
                <div class="code-name">#oi-a-icon_keypoint</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_other"></use>
                </svg>
                <div class="name">icon_other</div>
                <div class="code-name">#oi-icon_other</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_approve"></use>
                </svg>
                <div class="name">icon_approve</div>
                <div class="code-name">#oi-icon_approve</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_procurement"></use>
                </svg>
                <div class="name">icon_procurement</div>
                <div class="code-name">#oi-icon_procurement</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_urgency"></use>
                </svg>
                <div class="name">icon_urgency</div>
                <div class="code-name">#oi-icon_urgency</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_printer"></use>
                </svg>
                <div class="name">icon_printer</div>
                <div class="code-name">#oi-icon_printer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_postage"></use>
                </svg>
                <div class="name">icon_postage</div>
                <div class="code-name">#oi-icon_postage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_cost2"></use>
                </svg>
                <div class="name">icon_cost</div>
                <div class="code-name">#oi-icon_cost2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_rivet"></use>
                </svg>
                <div class="name">icon_rivet</div>
                <div class="code-name">#oi-icon_rivet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_telephonecharge"></use>
                </svg>
                <div class="name">icon_telephone charge</div>
                <div class="code-name">#oi-a-icon_telephonecharge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_sign"></use>
                </svg>
                <div class="name">icon_sign</div>
                <div class="code-name">#oi-icon_sign</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_wine"></use>
                </svg>
                <div class="name">icon_wine</div>
                <div class="code-name">#oi-icon_wine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_parkingcharge"></use>
                </svg>
                <div class="name">icon_parking charge</div>
                <div class="code-name">#oi-a-icon_parkingcharge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_passengercar"></use>
                </svg>
                <div class="name">icon_passenger car</div>
                <div class="code-name">#oi-a-icon_passengercar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_train"></use>
                </svg>
                <div class="name">icon_train</div>
                <div class="code-name">#oi-icon_train</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_automobile"></use>
                </svg>
                <div class="name">icon_automobile</div>
                <div class="code-name">#oi-icon_automobile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_steamship"></use>
                </svg>
                <div class="name">icon_steamship</div>
                <div class="code-name">#oi-icon_steamship</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_oilcost"></use>
                </svg>
                <div class="name">icon_oil cost</div>
                <div class="code-name">#oi-a-icon_oilcost</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_airplane"></use>
                </svg>
                <div class="name">icon_airplane</div>
                <div class="code-name">#oi-icon_airplane</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_gift"></use>
                </svg>
                <div class="name">icon_gift</div>
                <div class="code-name">#oi-icon_gift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_hire"></use>
                </svg>
                <div class="name">icon_hire</div>
                <div class="code-name">#oi-icon_hire</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_entertainment"></use>
                </svg>
                <div class="name">icon_entertainment</div>
                <div class="code-name">#oi-icon_entertainment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_cateringindustry"></use>
                </svg>
                <div class="name">icon_catering industry</div>
                <div class="code-name">#oi-a-icon_cateringindustry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_people"></use>
                </svg>
                <div class="name">icon_people</div>
                <div class="code-name">#oi-icon_people</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_file"></use>
                </svg>
                <div class="name">icon_file</div>
                <div class="code-name">#oi-icon_file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_photograph"></use>
                </svg>
                <div class="name">icon_photograph</div>
                <div class="code-name">#oi-icon_photograph</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_edit"></use>
                </svg>
                <div class="name">icon_edit</div>
                <div class="code-name">#oi-icon_edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_delete"></use>
                </svg>
                <div class="name">icon_delete</div>
                <div class="code-name">#oi-icon_delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_wechat"></use>
                </svg>
                <div class="name">icon_wechat</div>
                <div class="code-name">#oi-icon_wechat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_cost1"></use>
                </svg>
                <div class="name">icon_cost</div>
                <div class="code-name">#oi-icon_cost1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_record"></use>
                </svg>
                <div class="name">icon_record</div>
                <div class="code-name">#oi-icon_record</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_close"></use>
                </svg>
                <div class="name">icon_close</div>
                <div class="code-name">#oi-icon_close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_proceeds"></use>
                </svg>
                <div class="name">icon_proceeds</div>
                <div class="code-name">#oi-icon_proceeds</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_proportion"></use>
                </svg>
                <div class="name">icon_proportion</div>
                <div class="code-name">#oi-icon_proportion</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_cost"></use>
                </svg>
                <div class="name">icon_cost</div>
                <div class="code-name">#oi-icon_cost</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_invoice"></use>
                </svg>
                <div class="name">icon_invoice</div>
                <div class="code-name">#oi-icon_invoice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_apply"></use>
                </svg>
                <div class="name">icon_apply</div>
                <div class="code-name">#oi-icon_apply</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_route"></use>
                </svg>
                <div class="name">icon_route</div>
                <div class="code-name">#oi-icon_route</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_guanbi"></use>
                </svg>
                <div class="name">icon_关闭</div>
                <div class="code-name">#oi-icon_guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_drag"></use>
                </svg>
                <div class="name">icon_drag</div>
                <div class="code-name">#oi-icon_drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-icon_statistics"></use>
                </svg>
                <div class="name">icon_statistics</div>
                <div class="code-name">#oi-icon_statistics</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#oi-a-icon_cancelafterverification"></use>
                </svg>
                <div class="name">icon_cancel after verification</div>
                <div class="code-name">#oi-a-icon_cancelafterverification</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
